<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #userIndex {
        color: #444;
        background: #fff;
    }

    .edit-text,
    .del-text {
        cursor: pointer;
        color: #444;
        margin-right: 14px;
    }

    .edit-text {
        color: #7438D5;
    }

    .del-text {
        color: #FF5959;
    }

    .avatar-img {
        width: 26px;
        height: 26px;
        border: 1px solid #E5E5E5;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/groupon.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="userIndex" v-cloak>
    <div class="common-header-container">
        <div>
            用户列表
        </div>
        <div class="common-header-search">
            <el-input placeholder="请输入搜索内容" size="small" suffix-icon="el-icon-search" v-model="searchKey">
            </el-input>
        </div>
    </div>
    <div class="common-button-container">
        <div class="common-refresh-button" @click="getData">
            <i class="el-icon-refresh"></i>
        </div>
    </div>
    <div>
        <div class="common-table-container">
            <el-table :data="tableData" stripe border>
                <template v-for="(item, index) in tableDataprop" :key="index">
                    <el-table-column :fixed="item.fixed" :prop="item.field" :label="item.title"
                        :align="item.align ? item.align : 'center'" 
                        :min-width="
                      Number(item.width) +
                      Number(flexColumnWidth(item.field, tableData)) +
                      'px'
                    ">
                        <template slot-scope="scope">
                            <template v-if="item.type == 'id'">
                                {{ scope.row[item.field] }}
                            </template>
                            <template v-if="item.type == 'avatar'">
                                <div class="avatar-img">
                                    <el-image :src="Fast.api.cdnurl(scope.row.avatar)">
                                        <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                        </div>
                                    </el-image>
                                </div>
                            </template>
                            <template v-if="item.type == 'nickname'">
                                {{scope.row.nickname}}
                            </template>
                            <template v-if="item.type == 'mobile'">
                                <span v-if="scope.row.mobile">{{scope.row.mobile}}</span>
                                <span v-else>-</span>
                            </template>
                            <template v-if="item.type == 'money'">
                                <span v-if="scope.row.money">{{scope.row.money}}</span><span
                                    class="common-unit">元</span>
                            </template>
                            <template v-if="item.type == 'logintime'">
                                {{moment(scope.row.logintime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                            </template>
                            <template v-if="item.type == 'oper'">
                                {if condition = "$auth->check('groupon/user/user/profile')"}
                                <span class="edit-text" @click="operation('edit',scope.row.id)">查看详情</span>
                                {/if}
                                {if condition = "$auth->check('groupon/user/user/del')"}
                                <span class="del-text" @click="operation('del',scope.row.id)">删除</span>
                                {/if}
                            </template>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="common-pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>